<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <!--模糊查询-->
    <el-input v-model="info.bid" type="hidden"></el-input>
    <el-input v-model="info.gname" placeholder="商品名称"  style="display: inline-block;width: 200px;"></el-input>
    上架日期：<el-input v-model="info.putDate" placeholder="上架日期" type="date"  style="display: inline-block;width: 200px;"></el-input>
    <el-input v-model="info.count" placeholder="商品库存"  style="display: inline-block;width: 200px;"></el-input>
    <el-button icon="el-icon-search" circle @click="searchData()"></el-button>
    <el-button type="success" plain @click="addGoods()">上新商品</el-button>

    <el-table
            ref="FormRef"
            :data="goodsArr"
            tooltip-effect="dark"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="编号"
                width="80">
        </el-table-column>
        <el-table-column
                prop="gname"
                label="商品名称">
        </el-table-column>
        <el-table-column
                prop="code"
                label="商品编码">
        </el-table-column>
        <el-table-column
                prop="category.category"
                label="商品类别">
        </el-table-column>
        <el-table-column
                prop="spec.stype"
                label="商品规格">
        </el-table-column>
        <el-table-column
                prop="brand.btype"
                label="商品品牌">
        </el-table-column>
        <el-table-column
                prop="grade.gtype"
                label="商品等级">
        </el-table-column>
        <el-table-column
                prop="deposit.state"
                label="商品储藏方式">
        </el-table-column>
        <el-table-column
                prop="putDate"
                label="上架日期">
        </el-table-column>
        <el-table-column
                prop="sprice"
                label="价格">
        </el-table-column>
        <el-table-column
                prop="count"
                label="库存">
        </el-table-column>
        <el-table-column
                prop="goodsState.goodsState"
                label="商品状态">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="text" @click="showUpdateGoods(scope.row.id)">编辑</el-button>
                <el-button type="text" @click="deleteGoods(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog
            title="编辑信息"
            :visible.sync="updateGoodsVisible"
            width="30%"
            center="true">
        <el-form :model="updateGoodsInfo" status-icon :rules="rules" ref="updateGoodsInfo" label-width="100px" class="demo-ruleForm">
            <input v-model="updateGoodsInfo.id" type="hidden"/>
            <el-form-item label="商品名称" prop="gname">
                <el-input v-model="updateGoodsInfo.gname" readonly="readonly" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品编号" prop="code">
                <el-input v-model="updateGoodsInfo.code" readonly="readonly" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品库存" prop="count">
                <el-input v-model.number="updateGoodsInfo.count" autocomplete="off"></el-input>
            </el-form-item>
            <!--<el-form-item label="上架日期" prop="putdate">
                <el-input v-model="updateGoodsInfo.putdate" type="date" autocomplete="off"></el-input>
            </el-form-item>-->
            <el-form-item label="商品价格" prop="sprice">
                <el-input v-model="updateGoodsInfo.sprice"></el-input>
            </el-form-item>
            <el-form-item label="商品状态" prop="state">
                <el-select v-model="updateGoodsInfo.state">
                    <el-option v-for="(s,i) in stateArr" :label="s.goodsState" :value="s.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
			      <el-button @click="updateGoodsVisible=false">取 消</el-button>
			      <el-button type="primary" @click="updateStoreGoods()">确 定</el-button>
			    </span>
    </el-dialog>
    <el-pagination
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            :total="pageTotal">
    </el-pagination>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            info:{},
            goodsArr:[],
            bid:0,
            pageTotal:0,
            putDateArr:[],
            updateGoodsVisible:false,
            updateGoodsInfo:{},
            stateArr:[],
            rules:{
                count: [
                    { required: true, message: '库存不能为空'},
                    { pattern:/^\+?[0-9][0-9]*$/,message:'库存不能为负数',trigger: 'blur'}
                ],
                sprice:[
                    { required: true, message: '价格不能为空'},
                    { pattern:/^([1-9]\d{0,9}|0)([.]?|(\.\d{1,2})?)$/,message:'价格必须大于0',trigger: 'blur'}
                ]
            }
        },
        methods:{
            handleCurrentChange:function (val) {
                getInfo(val,10);
            },
            searchData:function () {
              getInfo(1,10);
            },
            deleteGoods:function(id){
                if(confirm("删除不可更改，您确定要删除吗？")){
                    $.get("/cai/storeGoods/deleteOneGoods/"+id,function (backData) {
                        if(backData.code == 1){
                            app.$notify({
                                title: '成功提示',
                                message: backData.msg,
                                type: 'success'
                            });
                            getInfo(1,10);
                        }else {
                            app.$notify.error({
                                title: '错误提示',
                                message: backData.msg
                            });
                        }
                    });
                }
            },
            addGoods:function(){
                $.get("/cai/storeGoods/getState/"+app.info.bid,function (stateBackData) {
                    if (stateBackData.code == 1){
                        $.post("/cai/storeGoods/getCid",app.info,function (backData) {
                            window.location.href = "/cai/addStoreGoods.html?cid="+backData.data;
                        });
                    } else {
                        app.$notify.error({
                            title: '错误提示',
                            message: stateBackData.msg
                        });
                    }
                });
            },
            showUpdateGoods:function (id) {
                $.get("/cai/storeGoods/getState/"+app.info.bid,function (sBackData) {
                    if(sBackData.code == 1){
                        $.get("/cai/storeGoods/getOneGoods/"+id,function (backData) {
                            $.get("/cai/storeGoods/stateList",function (stateBackData) {
                                app.stateArr = stateBackData.data;
                                app.updateGoodsInfo = backData.data;
                                app.updateGoodsVisible = true;
                            })
                        });
                    }else {
                        app.$notify.error({
                            title: '错误提示',
                            message: sBackData.msg
                        });
                    }
                });
            },
            updateStoreGoods:function () {
                app.$refs["updateGoodsInfo"].validate((valid) => {
                    if (valid) {
                        $.post("/cai/storeGoods/updateOneGoods",app.updateGoodsInfo,function (backData) {
                            if(backData.code == 1){
                                app.$notify({
                                    title: '成功提示',
                                    message: backData.msg,
                                    type: 'success'
                                });
                                app.updateGoodsVisible = false;
                                getInfo(1,10);
                            }else {
                                app.$notify.error({
                                    title: '错误提示',
                                    message: backData.msg
                                });
                            }
                        });
                    }
                });
            }
        }
    });

    $.get("/cai/consumer/getBid",function (backData) {
        app.bid = backData.data;
        app.info.bid = app.bid;

       /* getInfo(1,10);*/
    });
    function getInfo(a,b) {
        app.info.pageNo = a;
        app.info.pageCount = b;
        $.post("/cai/storeGoods/searchList",app.info,function(backData){
            app.goodsArr = backData.data.currentData;
            app.pageTotal = backData.data.currentDataTotal;
        });
    }
    getInfo(1,10);

</script>
</body>
</html>